<template>
  <!-- 导航 开始 -->
  <div class="nav">
    <div class="avatar">
      <img v-if="islogin" :src="this.img" />
      <img v-else src="../../public/0.png" />
    </div>
    <ul>
      <li><router-link to="/index">推荐</router-link></li>
      <li><router-link to="/member">会员</router-link></li>
      <li><router-link to="/activity">活动</router-link></li>
    </ul>
  </div>
  <!-- 导航 结束 -->
</template>
<script>
export default {
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      islogin: false,
      user: [],
      img: "",
    };
  },
  methods: {
    avatar() {
      this.axios.get("/user/checkuid/" + this.uid).then((result) => {
        this.user = result.data.data;
        let imgPath = this.user.avatar;
        this.img = "/" + imgPath;
      });
    },
    show() {
      if (sessionStorage.getItem('islogin')) {
        this.islogin = true;
      } else
        this.islogin = false;
    },
  },
  mounted(){
    this.avatar()
    this.show()
  }
};
</script>

<style>
/* 导航 */
.nav {
  width: 100%;
  height: 45px;
  position: fixed;
  top: 0;
  padding: 2% 20px;
  display: flex;
  z-index: 99;
  background-color: #fcfcfc;
}
.nav .avatar > img {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 40px;
}
.nav > ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
  line-height: 40px;
  font-size: 14px;
  height: 40px;
}
.nav > ul > li {
  width: 50px;
  margin-left: 20px;
}
.nav ul > li > a {
  display: block;
  color: #333;
  position: relative;
}
.nav ul > li > .router-link-active {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}
.nav .router-link-active::after {
  content: "";
  display: block;
  width: 15px;
  height: 3px;
  background-color: #333;
  border-radius: 3px;
  position: absolute;
  left: 17px;
}
</style>
